<template>
	<!--模板里只能有一个根目录 -->
	<div>
		<div class="text-box">
			<h1>自定的组件Demo02:</h1>
			<p>{{username }}</p>
		
			<p><button @click="changName">修改姓名</button></p>
		</div>
		
		<div>123</div>
	</div>
</template>

<script>
	 
	 //导出vue对象,替代了new Vue({}) 这个区域，因为本身vue组件就是一个Vue对象
	 //当该组件被渲染的时候，会自动创建一个new Vue()对象,通过export default把
	 //{}里面的代码执行出来就可以了
	 export default{
		 //vue组件里data数据源必修是一个函数格式
		  data(){
			  return {
				  username: 'tom'
			  }
		 },
		 //定义一个方法区
		 methods:{
			 changName(){
				 this.username = 'admin'
			 }
		 },
		 //过滤器
		 filters:{},
		 //侦听器：
		 watch:{},
		 //计算属性
		 computed:{}
	 }
	 
	 
	 
</script>

<style lang="less">
	.text-box{
		height: 50px;
		background-color: palegoldenrod;
	}
</style>
